<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="分析类型" prop="sjfxType">
          <el-radio-group v-model="queryParams.sjfxType">
          <el-radio :label="1">舆情分类</el-radio>
          <el-radio :label="2">涉情单位</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      </el-col>
      

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>
              <i class="el-icon-pie-chart"></i> 占比分析
            </span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 420px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>
              <i class="el-icon-odometer"></i> 数量分析
            </span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="usedmemory" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { sjfx } from "@/api/sywx/yqdj";
import * as echarts from "echarts";

export default {
  name: "Cache",
  data() {
    return {
      // 统计命令信息
      commandstats: null,
      // 使用内存
      usedmemory: null,
      // cache信息
      cache: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        sjfxType: 1
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查缓存询信息 */
    getList() {
      sjfx(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        let data = [];
        let data1 = [];
        let data2 = [];
        let all = 0
        response.data.forEach(e => {
          data.push({
            value: e.sjfxNum,
            name: e.sjfxName
          });
          data1.push(e.sjfxName);
          data2.push(e.sjfxNum);
          all = all + e.sjfxNum
        });
        this.commandstats = echarts.init(this.$refs.commandstats, "pie");
        this.commandstats.setOption({
          tooltip: {
            trigger: "item"
          },
          legend: {
            orient: "vertical",
            left: "left"
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              label: {
                show: true,
                formatter(param) {
                  // correct the percentage
                  return param.name + " (" + (param.value/all * 100).toFixed(2) + "%)";
                }
              },
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        });
        this.usedmemory = echarts.init(this.$refs.usedmemory, "pie");
        this.usedmemory.setOption({
          xAxis: {
            type: "category",
            data: data1
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              data: data2,
              type: "bar",
              label: {
                show: true,
                position: "top"
              }
            }
          ]
        });
      });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.sjfxType = 1
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
